<template>
    <div class="matchFlowCancelDialogClass">
        <div class="shareHeadClass">
            <p class="colCLas"></p>
            <p class="info">发票信息栏</p>
        </div>
        <el-form
            :model="formData"
            :rules="isLook ? {} : rules"
            label-width="85px"
            class="formInline"
            size="small"
            ref="hzqrdsqRef"
            :disabled="isLook"
        >
            <div style="margin-bottom: 8px" v-if="(this.nodeId != 'FLOW_PPLSCX_SP')">
                <el-row v-if="!isLook">
                    <el-col :span="8">
                        <el-form-item label="发票代码：">
                            <el-input
                                v-model="formData.fpdm"
                                maxlength="20"
                                placeholder="请输入发票代码"
                                :disabled='formData.fphm.length >= 20'
                                @input="handleInput1"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="发票号码：" prop="fphm">
                            <el-input
                                v-model="formData.fphm"
                                maxlength="20"
                                placeholder="请输入发票号码"
                                @input="handleInput2"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-button
                        v-if="!isLook"
                        type="primary"
                        size="small"
                        style="margin-left: 8px"
                        @click="quickAddRevoke"
                    >
                        快速添加
                    </el-button>
 
                    <el-button v-if="!isLook" size="small" @click="research">
                        重置
                    </el-button>
                </el-row>
            </div>
            <el-form-item label="发票信息：">
                    <tableList
                        :showIndex="true"
                        border
                        maxHeight="60"
                        :keySet="keySet"

                        :tableData="formData.fpxxDetailList"
                        ref="tableRef"
                    >
                        <template #gmfmc="{ row }">
                            <div>
                                {{ row.gmfmc }}
                            </div>
                        </template>
                    </tableList>
            </el-form-item>

                        <el-form-item label="明细行信息：">
           
                    <tableList
                        :showIndex="true"
                        border
                        maxHeight="260"
                        :keySet="keySet2"
                        :tableData="formData.fpxxItemList"
                        @rowDblclick='rowClickFn'
                        ref="tableRef"
                handlerFixed="right"
            :handlerShow="true"
        >
            <template #handler="{ row }">
                <div @click="rowClickFn(row)" class="worldBlueBtn">查看</div>
            </template>
                        <template #gmfmc="{ row }">
                            <div>
                                {{ row.gmfmc }}
                            </div>
                        </template>
                    </tableList>
            </el-form-item>
            <detail v-model="detailShow" :selectRow='selectRow'></detail>
        </el-form>


    </div>
</template>

<script>
import tableList from '@/components/tableList/index.vue'
import {  fastAddRevoke,getApplyDetail } from '@/api/matchFlowRevoke.js'
import detail from './components/invoiceInfomation30DetailDialog.vue' 


export default {
    name: 'invoiceInformation30',
    props: {
        isLook: {
            type: Boolean,
            default: false,
        },
        nodeId: {
            type: String,
            default: '',
        },
    },
    created(){
        this.initDetail()
    },
    data() {
        return {
            detailShow: false,
            selectRow: null,
            rules: {
                fphm: [
                    {
                        required: true,
                        message: '请输入发票号码',
                        trigger: 'change',
                    },
                ],
            },
            keySet: [
                {
                    label: '销售方名称',
                    englishName: 'xsfmc',
                    width: '200',
                },
                {
                    label: '发票类型',
                    englishName: 'fplx',
                    width: '160',
                },
                {
                    label: '发票号码',
                    englishName: 'fphm',
                },
                {
                    label: '发票代码',
                    englishName: 'fpdm',
                    width: '200',
                },
                {
                    label: '开票日期',
                    englishName: 'kprq',
                    width: '200',
                },
                {
                    label: '购买方名称',
                    englishName: 'gmfmc',
                    width: '200',
                },
                {
                    label: '购买方纳税人识别号',
                    englishName: 'gmfsbh',
                    width: 'labelWidth',
                },
                {
                    label: '不含税金额',
                    englishName: 'hjje',
                    width: '200',
                },
                {
                    label: '税额',
                    englishName: 'hjse',
                },
                {
                    label: '含税金额',
                    englishName: 'jshj',
                },
            ],
            keySet2: [
                {
                    label: '项目名称',
                    englishName: 'spmc',
                    width: '200',
                },
                {
                    label: '规格型号',
                    englishName: 'ggxh',
                    width: '160',
                },

                {
                    label: '单位(面积单位)',
                    englishName: 'jldw',
                    width: 'labelWidth',
                },
                {
                    label: '数量',
                    englishName: 'gmsl',
                    width: '100',
                },
                {
                    label: '单价',
                    englishName: 'dj',
                },
                {
                    label: '不含税金额',
                    englishName: 'je',
                    width: 'labelWidth',
                },
                {
                    label: '税率',
                    englishName: 'sl',
                    width: '100',
                },
                {
                    label: '税额',
                    englishName: 'se',
                    width: '100',
                },
            ],

            formData: {
                fpdm: '', //
                fphm: '', //
                fpxxDetailList: [],
                fpxxItemList: [],
            },

        }
    },
    methods: {
             initDetail(){
                    if(this.nodeId == 'root' || this.isLook || this.nodeId == 'FLOW_PPLSCX_SP'){
                        let obj = JSON.parse(
                            sessionStorage.getItem('handleDetailInfo')
                        )
                        let id = obj.busId || this.$store.state.invoice2.invoinceFormStart1.busId
                        getApplyDetail(id).then(({ data, code,message })=>{
                            if (code == 200) {
                                this.formData = {
                                    ...data.invoiceDetail,
                                    fpxxDetailList:    [data.invoiceDetail],
                                    fpxxDetail:    data.invoiceDetail,
                                    fpxxItemList:    data.invoiceItemList,
                                }
                                setTimeout(() => {
                                    this.$refs.hzqrdsqRef.clearValidate()
                                }, 20)
                            }
                        })
                    }
        },
        rowClickFn(val) {
                        this.selectRow = {...val}
                        this.selectRow.fphm = this.formData.fphm
                        this.selectRow.matid = this.formData.fpxxDetail.matid
                        this.selectRow.iviid = val.iviid
                        this.selectRow.ywdh = this.formData.ywdh
                        this.selectRow.gmfmc = this.formData.fpxxDetailList[0].gmfmc
                    this.detailShow = true;
        },

        handleInput1(val) {
            // 使用正则表达式去除非数字字符
            this.formData.fpdm = val.replace(/\D/g, '')
            if (this.formData.fpdm.length > 12) {
                this.formData.fpdm =
                    this.formData.fpdm.slice(0, 12)
            }
        },

        handleInput2(val) {
            this.formData.fphm = val.replace(/\D/g, '')
            if (this.formData.fphm.length > 20) {
                this.formData.fphm =
                    this.formData.fphm.slice(0, 20)
            }
        },
        quickAddRevoke() {
            if (
                this.formData.fphm.length < 20 &&
                !this.formData.fpdm
            ) {
                return this.$message.error(
                    '发票号码不足20位，发票代码不得为空！'
                )
            }

            let params = new URLSearchParams('')
            params.append('fphm', this.formData.fphm)
            params.append('fpdm', this.formData.fpdm)
            params.append(
                'applyId',
                this.$store.state.invoice2.invoinceFormStart1.busId
            )
            fastAddRevoke(params).then(({ data, code,message }) => {
                if (code == 200) {
                    this.formData = {
                        ...this.formData,
                        ...data.formData,
                        fpxxDetailList:    [data.invoiceDetail],
                        fpxxDetail:    data.invoiceDetail,
                        fpxxItemList:    data.invoiceItemList,
                    }
                    setTimeout(() => {
                        this.$refs.hzqrdsqRef.clearValidate()
                    }, 20)
                }
            })
        },
 

        research() {
            this.formData.fphm = ''
            this.formData.fpdm = ''
        },

    },
    components: {
        tableList,
        detail,
    },
}
</script>

<style lang = "scss" scoped>

.matchFlowCancelDialogClass {
    width: 100%;
    ::v-deep .el-form-item__error {
        top: 70%;
    }
    ::v-deep .el-dialog__body {
        padding: 10px 20px;
    }
    ::v-deep .el-dialog__footer {
        padding: 0px 20px 10px;
    }

}

::v-deep .el-table__body tr.current-row > td {
    background-color: #fbec88 !important;
}
::v-deep .el-table__body tr.current-row > td.el-table__cell {
    background-color: #fbec88 !important;
}
::v-deep .vxe-modal--wrapper .vxe-modal--content {
    white-space: none;
}
</style>
